<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应宽高</title>
		<style>
			/* 尺寸问题：屏幕宽高比不一致，限定一个宽高范围
			 min-width属性：最小宽度	【√】	min-height属性：最小高度
			 max-width属性：最大宽度	【√】	max-height属性：最大高度
			 */
			div{
				width: 80%;/* 默认宽度 */
				min-width: 500px;/* 内容最小宽度是500px，不能改变 */
				max-width: 600px;/* 页面尺寸:最小是500px,最大是800px,默认80% */
				/* 定好最小跟最大宽高，PC：80% 300px
									移动：500~600宽度【页面不变】   300px
									自适应
				 */
				height: 300px;
				background: #ffcaf6;
			}
			/**
			 * html结构		外层div--.container   内层div---.box  写lorem
			 * css结构	    .container样式：背景颜色#f0f0f0
			 * 								padding内边距：20px
			 * 								文本居中;
			 * 				.box样式：背景颜色#4caf50；
			 * 						 文字颜色：白色
			 * 						 宽度60%
			 * 						 宽度范围：500~600宽度【页面不变】
			 * 						 margin:auto;
			 */
		</style>
	</head>
	<body>
		<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque vitae enim officia quaerat similique repudiandae eligendi cum non ipsam dolorem fuga mollitia facere, nesciunt quos rerum ea et? Labore, necessitatibus!</div>
	</body>
</html>